@use "variables";
@use "sass:color";

/* -------------------------------------------------
   Layout – CSS Grid with auto‑fit columns
   ------------------------------------------------- */
.report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
    gap: 1rem;
}

/* -------------------------------------------------
   Button – larger card, flat background, no shadow
   ------------------------------------------------- */
.report-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 1.2rem 1.6rem;
    background:  var(--panel-lighter);
    border-radius: 0.6rem;
    text-decoration: none;
    font-weight: 400;
    transition: background 0.2s, transform 0.2s;
    position: relative;
    overflow: hidden;
}

/* -------------------------------------------------
   Icon – bigger, inherits the same text color
   ------------------------------------------------- */
.report-btn i {
    margin-right: 0.8rem;
    font-size: 128px;
    color: inherit;
    position: absolute;
    top: -0.8rem;
    transform: rotateZ(-35deg);
    opacity: .3;
    inset-inline-end: -40px;
    transition: 300ms;
}

/* -------------------------------------------------
   Hover / focus – subtle lift, no shadow
   ------------------------------------------------- */
.report-btn:hover,
.report-btn:focus {
    //background:  var(--panel-lighter);
    opacity: 0.7;
    transform: translateY(-3px) scale(1.1);

}

/* -------------------------------------------------
   Active (pressed) state – slight inset
   ------------------------------------------------- */
.report-btn:active {
    transform: translateY(1px);
}

/* -------------------------------------------------
   Responsive tweak – keep uniform height
   ------------------------------------------------- */
@media (min-width: 1200px) {
    .report-btn {
        aspect-ratio: 1 / 0.5; /* keeps cards proportionate on wide screens */
    }
}

/* -------------------------------------------------
   customers class
   ------------------------------------------------- */

.customer-new {
    padding: .2rem .5rem;
    background: yellow;
    color: black;
    border-radius: 3px;
}

.customer-regular {
    padding: .2rem .5rem;
    background: white;
    color: black;
    border-radius: 3px;
}

.customer-loyal {
    padding: .2rem .5rem;
    background: lime;
    color: black;
    border-radius: 3px;
}
